// pages/edu/my/share/index.js
import { My } from '../../model/my.js'

const MyModel=new My()

Page({

  /**
   * 页面的初始数据
   */
  data: {
    wx_code:'',
    localImageUrl:{}
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this._getImages()
    this._getUserInfo()
    this._getWxCode()
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },

  //-----------------------------

  /**
   * edu images
   */
  _getImages(){
    MyModel.getAd('edu_images',(res)=>{
      this.setData({edu_images:res});
    });
  },

  /**
   * 用户信息
   */
  _getUserInfo(){
    MyModel.getInfo((res)=>{
      this.setData({userInfo:res})
    })
  },

  /**
   * 小程序码
   */
  _getWxCode(){
    MyModel.request({
      'url':'/wx_code',
      success:(res)=>{
        this.setData({wx_code:res.data.request})
        // this._getImageInfo((res) => {
        //   // canvas绘制文字和图片
        //   this._setCanvas()
        // })
        var localImageUrl = {}
        this._getImageInfo(res.data.request).then((res)=>{
          localImageUrl.wx_code=res.path
          return this._getImageInfo(this.data.edu_images.edu_my_header_bg.img)
        }).then((res)=>{
          localImageUrl['edu_my_header_bg']=res.path
          return this._getImageInfo(this.data.userInfo.avatar_url)
        }).then((res)=>{
          localImageUrl['avatar_url']=res.path
          this.data.localImageUrl=localImageUrl
          this._setCanvas()
        })
        
      }
    })
  },

  // 保存海报
  onSaveImgShare: function () {
    this.savetup()
  },

  _getImageInfo(url) {
    return new Promise(
      (resolve,reject)=>
      wx.getImageInfo({
        src: url,
        success:resolve,
        fail:reject,
      })
    )
  },

  // 画出图片
  _setCanvas() {
    const ctx = wx.createCanvasContext('hideCanvas')
    const headerImg = "../../../../images/edu-header.jpg"
    const edu_my_header_bg=this.data.localImageUrl.edu_my_header_bg
    const avatar_url=this.data.localImageUrl.avatar_url
    var xcxcode = this.data.localImageUrl.wx_code
    const exam_photo=this.data.userInfo.exam_photo
    const edu_line=this.data.userInfo.edu_line
    const exam_level=this.data.userInfo.exam_level

  
    var avatarurl_width = 140;    //绘制的头像宽度
    var avatarurl_heigth = 140;   //绘制的头像高度
    var avatarurl_x = 130;   //绘制的头像在画布上的位置
    var avatarurl_y = 250;   //绘制的头像在画布上的位置

    

    // //填充背景
    ctx.setFillStyle('#ffffff');
    ctx.fillRect(0, 0, 750, 1334);
   
    //绘制产品图
    ctx.drawImage(headerImg, 0, 0, 750, 190);
    ctx.drawImage(edu_my_header_bg, 0, 190, 750, 350);

    ctx.moveTo(375, 190)
    ctx.lineTo(375, 540)
    ctx.setStrokeStyle('#999999')
    ctx.stroke()
    
    this.darwAvatarArc(ctx,avatar_url,avatarurl_x,avatarurl_y,avatarurl_width,avatarurl_heigth)

    let username = {
      x: 95,
      y: 410,
      width: 230,
      height: 35,
      line: 3,
      color: '#ffffff',
      size: 26,
      align: 'left',
      baseline: 'top',
      text:this.data.userInfo.nick_name,
      bold: false
    }
    //绘制内容
    this.textWrap(ctx, username);

    //绘制学生证详情
    ctx.setFillStyle('#3A63BD')
    ctx.fillRect(435, 250, 90, 35)
    ctx.setFillStyle('#fff')
    ctx.setFontSize(22)
    ctx.fillText('学生证',445,275)
    let exam_level_top=335
    exam_level.forEach((item,index)=>{
      ctx.fillText(item.get_exam_jobs.name+' : '+item.level_text ,435,exam_level_top+(index*40))
    })
    // ctx.fillText('营销考核：未考核',435,335)
    // ctx.fillText('施工考核：未考核',435,375)
    
    ctx.fillText('工程实例：'+ exam_photo,435,415)
    ctx.fillText('我的学龄：'+ edu_line,435,455)

    ctx.drawImage(xcxcode, 250, 600, 250, 250);

    //绘制介绍
    ctx.setFontSize(15);
    ctx.setFillStyle('#333');
    ctx.fillText('长按扫码查看详情', 320, 900);
    ctx.fillText('分享自艾族小程序', 320, 925);
    ctx.draw();
    
  },



  savetup: function () {
    var that = this;
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      width: 750,
      height:  960,
      destWidth: 750,
      destHeight: 960,
      canvasId: 'hideCanvas',
      success: function (res) {
        //调取小程序当中获取图片
        console.log(res.tempFilePath);
        let imgRes=res
        wx.getSetting({
          success(res) {
            if (res.authSetting['scope.writePhotosAlbum']){
              wx.saveImageToPhotosAlbum({
                filePath: imgRes.tempFilePath,
                success(res) {
                  wx.showModal({
                    title: '存图成功',
                    content: '图片成功保存到相册了，去发圈噻~',
                    showCancel: false,
                    confirmText: '好哒',
                    confirmColor: '#229631',
                    success: function (res) {
                      // if (res.confirm) {
                      //   that.onHideCanvas()
                      // }
                    }
                  })
                },
                fail: function (res) {
                  console.log(res)
                }
              })
            }else{
              // that.showModal()
            }
          }
        })  
      },
      fail: function (res) {
        
      }
    })
  },

  /**
     * 渲染文字
     * @param {Object} obj
     */
  drawText: function (ctx, obj) {
    ctx.save();
    ctx.setFillStyle(obj.color);
    ctx.setFontSize(obj.size);
    ctx.setTextAlign(obj.align);
    ctx.setTextBaseline(obj.baseline);
    if (obj.bold) {
      ctx.fillText(obj.text, obj.x, obj.y - 0.5);
      ctx.fillText(obj.text, obj.x - 0.5, obj.y);
    }

    // 如果是一行就居中，多行就居左
    if(obj.length==1){
      ctx.fillText(obj.text, (750 - ctx.measureText(obj.text).width) / 2, obj.y);
    }
    else if(obj.length>1){
      ctx.fillText(obj.text, obj.x, obj.y);
    }


    if (obj.bold) {
      ctx.fillText(obj.text, obj.x, obj.y + 0.5);
      ctx.fillText(obj.text, obj.x + 0.5, obj.y);
    }
    ctx.restore();
  },

  /**
 * 获取文本折行
 * @param {Object} obj
 * @return {Array} arrTr
 */
  getTextLine: function (ctx, obj) {
    ctx.setFontSize(obj.size);
    let arrText = obj.text.split('');
    let line = '';
    let arrTr = [];
    for (let i = 0; i < arrText.length; i++) {
      var testLine = line + arrText[i];
      var metrics = ctx.measureText(testLine);
      var width = metrics.width;
      if (width > obj.width && i > 0) {
        arrTr.push(line);
        line = arrText[i];
      } else {
        line = testLine;
      }
      if (i == arrText.length - 1) {
        arrTr.push(line);
      }
    }
    return arrTr;
  },

  /**
   * 文本换行
   * @param {Object} obj
   */
  textWrap: function (ctx, obj) {
    let tr = this.getTextLine(ctx, obj);
    for (let i = 0; i < tr.length; i++) {
      if (i < obj.line) {
        let txt = {
          x: obj.x,
          y: obj.y + (i * obj.height),
          color: obj.color,
          size: obj.size,
          align: obj.align,
          baseline: obj.baseline,
          text: tr[i],
          bold: obj.bold,
          width:obj.width,
          length:tr.length
        };
        if (i == obj.line - 1) {
          txt.text = txt.text.substring(0, txt.text.length - 3) + '......';
        }
        this.drawText(ctx, txt);
      }
    }
  },

    /*
    画圆头像
    ctx: 画布对象
    src: 头像缓存路径
    x: 头像起始位置 横坐标
    y: 头像起始位置 纵坐标
    w: 头像宽度
    h: 头像高度，不传为w
  */
  darwAvatarArc: function(ctx, src, x, y, w, h){ 
    // 保存绘图上下文。
    ctx.save();
    // 开始创建一个路径。需要调用 fill 或者 stroke 才会使用路径进行填充或描边
    ctx.beginPath()
    // 设创建一个圆可以指定 起始弧度为 0，终止弧度为 2 * Math.PI。
    // 用 stroke 或者 fill 方法来在 canvas 中画弧线。
    ctx.arc(x+w/2, y+h/2, w/2, 0, Math.PI * 2, false);
    /* 从原始画布中剪切任意形状和尺寸。
    一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（
    不能访问画布上的其他区域）。可以在使用 clip 方法前通过使用 save 方法对当前画布区域进行保存，并在以后的任意时间通过restore方法对其进行恢复。
    */
    ctx.clip()
    // 画头像
    ctx.drawImage(src, x, y, w, h);
    // 恢复之前保存的绘图上下文。
    ctx.restore()
  },
})